<template>
  <div class="VCardTab">
    <div v-if="type === 1" class="tab-one">
      <div :class="['tab-item', { 'tab-select': modelValue === index }]" v-for="(item, index) in tabsData" :key="index"
        @click="handleTab(item, index)">{{ item.label }}
      </div>
    </div>
    <div v-else-if="type === 2" class="tab-two">
      <div :class="['tab-item', { 'tab-select': modelValue === index }]" v-for="(item, index) in tabsData" :key="index"
        @click="handleTab(item, index)">{{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from 'vue';


const props = defineProps({
  type: {
    type: Number,
    default: 1,
  },
  tabsData: {
    type: Array as any,
    default: [],
    required: true
  },
  modelValue: {
    type: Number,
    default: 0,
    required: true
  },
})
const { modelValue, type } = toRefs(props)

const emit = defineEmits(['update:modelValue'])

function handleTab(item: any, index: number) {
  emit('update:modelValue', index)
}


</script>
<style lang="scss" scoped>
.VCardTab {
  .tab-two {
    display: flex;

    .tab-item {
      padding: 2px 18px;
      font-size: 12px;
      cursor: pointer;
      border: 1px solid #fff;
      border-radius: 9px;
      margin: 5px;
      color: #fff;
    }

    .tab-select {
      background: #FF9C00;
      border: 0px;
      color: #fff;
    }
  }

  .tab-one {
    display: flex;

    .tab-item {
      color: #fff;
      font-weight: bold;
      padding: 5px 15px;
      font-size: 20px;
      cursor: pointer;
    }

    .tab-select {
      color: #FF9C00;
    }
  }

}
</style>